/* style.scss */

// TABLE OF CONTENTS
// ==================================================
//
// SASS
// - Variables
// - Mixins
// Web Fonts
// - Google Web Fonts
// CSS
// - Helpers
// - Basic HTML
// - Headings
// - Body Copy Elements
// - Styles by ID tag
// - Styles by class tag
// - Image with captions
// - Menu
// - Blog.css
// - Pagination
// - Gallery
// - Debugging
// - Search
//   - Search form
//   - Search results
// - Callouts
// - Code and Pre blocks

// Fonts
// --------------------------------------------------
//

// Variables
// --------------------------------------------------
$white         : rgb(255,255,255);
$black         : lighten( black, 15% );
$red           : rgb(154,29,30);
$darkred       : rgb(62,12,12);
$gray          : rgb(91,93,97);
$ltblue        : rgb(129,220,255);
$color1        : $ltblue;
$color2        : darken( $color1, 5% );
$color3        : saturate( adjust_hue( $color1, 90 ), 100%);
$cta-color     : hsl(357, 70%, 39%);
$unit          : 16px;
$copy          : $white;
//$fontCopy      : "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
$fontCopy      : Lato, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
$fontHeading   : $fontCopy;

// Mixins
// --------------------------------------------------
@mixin box-sizing( $p: 'border-box' ) {
  -moz-box-sizing: $p;
  -webkit-box-sizing: $p;
  box-sizing: $p;
}
* {
  @include box-sizing();
}

@mixin transition( $what: all, $time: 1s, $how: ease-in-out) {
  transition: $what $time $how;
  -o-transition: $what $time $how;
  -moz-transition: $what $time $how;
  -webkit-transition: $what $time $how;
}

$default-radius: 4px;
@mixin borderRadius( $top:$default-radius, $right:$default-radius, $bottom:$default-radius, $left:$default-radius ) {
  -moz-border-radius: $top $right $bottom $left;
  -webkit-border-radius: $top $right $bottom $left;
  border-radius: $top $right $bottom $left;
}

@mixin box-shadow( $x: 0px, $y: 1px, $blur: 3px, $color: #000, $opacity: 0.7 ) {
  -moz-box-shadow: $x $y $blur fade_out( $color, $opacity );
  -webkti-box-shadow: $x $y $blur fade_out( $color, $opacity );
  box-shadow: $x $y $blur fade_out( $color, $opacity );
}

@mixin text-shadow( $x: 0px, $y: 1px, $blur: 3px, $color: #000) {
  -moz-text-shadow: $x $y $blur $color;
  -webkit-text-shadow: $x $y $blur $color;
  text-shadow: $x $y $blur $color;
}

@mixin gradient( $from, $to ) {
  /* fallback/image non-cover color */
  background-color: $from;
  /* Firefox 3.6+ */
  background-image: -moz-linear-gradient($from, $to);
  /* Safari 4+, Chrome 1+ */
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
  /* Safari 5.1+, Chrome 10+ */
  background-image: -webkit-linear-gradient($from, $to);
  /* Opera 11.10+ */
  background-image: -o-linear-gradient($from, $to);
}

// Font size mixin to include px and rem
@mixin font-size($size, $is-important: false) {
  $size: if(unitless($size), $size, $size / 1px);

  @if $is-important {
    font-size: $size + px !important;
    font-size: ($size / 10) + rem !important;
  } @else {
    font-size: $size + px;
    font-size: ($size / 10) + rem;
  }
}

// Imports
// --------------------------------------------------
// Do this after I setup my mixins and variable so the imported inherit them
//
// import ZURB Foundation SASS
@import "app";
@import "settings";
@import "social_foundicons";
@import "social_foundicons_ie7";
// import my SASS
@import "foundation_overrides",
        "base",
        "layouts",
        "header",
        "navigation",
        "breadcrumbs",
        "pagination",
        "forms",
        "tab-box"
        ;

// Helpers
// --------------------------------------------------
.tight {
  line-height: 1.125;
}

.panel {
  padding: $unit;
  background-color: $white;
  border: 1px solid lighten($darkred,12%);
  color: $darkred;
  @include gradient( $white, darken($white, 10%));
}

p.large, span.large, strong.large {
  font-size: 1.5em;
}

p.huge, span.huge, strong.huge {
  font-size: 2.5em;
  font-weight: bold;
  @include text-shadow();
}

.indent {
  margin-left: 36px;
}

.drophead {
  font-size: 18px;
  font-weight: bold;
}

.clear:after
{
  content: ".";
  display: block;
  height: 1px;
  line-height: 1px;
  visibility: hidden;
  clear: both;
}

figure {
  float: none;
  max-width: 100%;

  &.left {
    float: left;
    margin: 0 16px 16px 0;
  }

  &.right {
    float: right;
    margin: 0 0 16px 16px;
  }

  &.collapse {
    margin: 0 0 14px;
    padding: 0;
  }

  figcaption {
      a,
      a:link,
      a:active,
      a:visited {
          color: hsl(hue(#81dcff), 100%, 40%);

          &:hover {
              color: hsl(hue(#81dcff), 100%, 20%);
          }
      }
  }

}

a img {
  border: 0 none;
}

img.right,
img.alignright {
  float: right;
  margin-left: $unit;
  margin-bottom: $unit;
}

img.alignleft,
img.left {
  float: left;
  margin-right: $unit;
  margin-bottom: $unit;
}

.fancy-framework {
  color: $color1;
  font-weight: bold;
  font-style: italic;
}

p.right {
  text-align: right;
}

.floatright { float: right; }

.footnote {
  font-size: 10.5px;
  font-weight: 300;
}

// Basic HTML
// --------------------------------------------------
* {
  @include box-sizing( border-box );
}

a, input, button, abbr {
  &:focus, &::selection {
    background-color: $red;
    color: $white;
    outline: none;
  }
}

html, body {
  background-color: $gray;
}

body {
  margin: 12px auto 0;
  background-color: $darkred;
  position: relative;
  font-family: $fontCopy;
  color: $copy;
  line-height: 1.68;
  padding-left: $unit;
  padding-right: $unit;
}

img#background {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  min-height: 100%;
  min-width: 100%;
  z-index: -1;
}

ins {
  background-color: hsl( hue($color3), 100%, 75% );
}

a,
a:link,
a:active,
a:visited
{
  color: $color1;
  @include transition( color, 0.25s, ease-in-out);

  &:hover {
    color: lighten( $color1, 25 );
  }

  &.plain {
    color: $white;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  &.external:after {
    content: " \21d2";
  }
}

aside {
  float: right;
  margin: 0 0 1em 1em;
  padding: .75em;
  width: 25%;
  border-style: solid;
  border-width: 0 0 0 1px;

  &.left {
    float: left;
    margin: 0 1em 1em 0;
    border-width: 0 1px 0 0;
  }
}

hr {
  height: 0;
  margin: 14px 0;
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: fade-out($white,0.66);

  &.dotted {
    clear: both;
    border-top-style: dotted;
  }
}

p {
  margin-top: 0px;
}

// Headings
// --------------------------------------------------
h1, h2, h3, h4, h5, h6
{
  font-family: $fontHeading;
  margin: 0 0 14px;
  line-height: 1.6;
  @include text-shadow();
}

h1
{
  font-size: $unit * 2.0;
  font-weight: normal;
  color: $color1;
}
h2
{
  font-size: $unit * 1.50;
  color: $color2;
  line-height: 1.25;
}
h3
{
  font-size: $unit * 1.25;
  color: darken( $color2, 10% );
}
h4
{
  font-size: $unit * 1.125;
  color: darken( $color2, 20% );
}
h5
{
  font-size: $unit * 1.00;
  color: darken( $color2, 20% );
}
h6
{
  font-size: $unit * 1.00;
  color: darken( $color2, 20% );
}

// place this after the h# tags
hgroup 
{
  margin: 0 0 2em 0;
  * { margin: 0; }
}

// Body copy elements
// --------------------------------------------------
p,
dl,
li {
  font-size: $unit * 14/16;
}

dl {
  dt {
    font-size: $unit * 16/16;
    font-weight: bold;
    margin-top: 1em;
  }

  dd {
    border-bottom: 1px solid white;
    padding-bottom: 1.5em;

    &:last-child {
      border: 0;
    }
  }
}

article {
  footer {
    font-size: $unit * 0.75;
    color: lighten( $copy, 30);
  }
}

// Styles by ID tags
// --------------------------------------------------
div#main {
  margin-top: 2em;
  padding-bottom: 48px;

  & > h1:first-child {
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 900;
  }
}
body.home div#main {
  margin-top: 0;
}

div#foundation {
  border-top: 1px solid $white;
  border-top: 1px solid fade-out($white, 0.7);
  padding: 15px 15px 48px;

  i {
    font-size: 24px;
    padding-right: 7px;
  }

  .boosterseat {
    vertical-align: 40%;
  }
}

footer#main {
  background-color: $black;
  border-top: 1px solid;
  margin-top: 2em;
  padding: 24px 48px 48px;
  margin-left: -16px;
  margin-right: -16px;

  p {
    font-size: $unit  * .75;
  }
}

// Styles by class tag
// --------------------------------------------------
ul.module {
  list-style: inside none;
  margin: 0 0 24px 0;
  padding: 0;
}

.module {
  h1 {
    color: $white;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;

    a { color: inherit; text-decoration: none; }
  }
}

a.button {
  color: $white;
  -moz-text-shadow: 0px 1px 2px $black;
  -webkit-text-shadow: 0px 1px 2px $black;
  text-shadow: 0px 1px 2px $black;
  @include borderRadius();
}

.slider__sidekicks {
    margin-right: 10px;

    & > li {
        margin-left: 20px;
        margin-top: 20px;
    }
    @media screen and (min-width: $screenSmall) {
        margin-left: 0;
    }
}

// Image with captions
// --------------------------------------------------
figure,
div.image {
  background: $white;
  float: right;
  padding: 8px;
  margin: 0 0 20px 20px;
  font-size: 12px;
  @include borderRadius( 8px, 8px, 4px, 4px );
  @include box-shadow();

  &.alignright { float: right; margin: 0 0 20px 20px; }
  &.alignleft { float: left; margin: 0 20px 20px 0; }

  &.thumb { padding: 2px; }

  img {
    display: block;
    margin-bottom: 8px;
    @include borderRadius();
  }
  figcaption,
  figcaption p,
  p.caption {
    color: #222;
    font-size: 12px;
    padding: 0;
    margin: 10px 0 5px;
  }
}

// Blog.css
// Styles for the blog controller
// --------------------------------------------------

section#blog article {
  padding-left: 60px;
  margin: .5em 0;
  border-bottom: 1px solid;
  position: relative;
  overflow: hidden;

  footer {
    float: left;
    width: 60px;
    margin: .25em 0 .125em -60px;
    text-align: center;
    font-size: 10px;
    line-height: 1.125;
    text-shadow: rgb(0,0,0) 0px 1px 3px;
    text-shadow: rgba(0,0,0,.5) 0px 1px 3px;

    time.day {
      font-weight: bold;
      font-size: 14px;
    }
  }

  h1 {
    margin: 0;
    font-size: 30px;
  }

  p {
    font-size: 12px;
    margin: 0 0 .5em 0;
  }

  a {
    text-decoration: none;
    transition-property: color;
    transition-duration: .1s;
    transition-delay: .1s;
    transition-timing-function: ease-out;
  }

  a:hover {
    color: rgb(250,50,50);
  }
}


// Pagination
// --------------------------------------------------
.pagination {
  a, span {
    margin: 0em .5em;
    padding: 0em .5em;
    font-size: 12px;
    float: left;
    display: block;
    text-decoration: none;
    background-color: rgba(255,255,255,.5);
    @include borderRadius();
    @include box-shadow();
  }
  span {
    color: lighten( $black, 30 );
  }
  a:hover {
    background-color: rgba(255,255,255,1);
  }
  a.first,
  a.last {
    display: none;
  }
  a.prev {}
  a.next {}
  a.page {
    width: 1.25em;
    text-align: center;
  }
  a.current {
    color: $black;
  }
}

// Gallery
// --------------------------------------------------
.gallery {
  .frame {
    width: 200px;
    height: 200px;
    overflow: hidden;

    a {
      display: block;
      overflow: hidden;
    }
    .image {
      display: block;
      width: 200px;
      height: 200px;
      background-size: cover;
      background-position: 50% 50%;
    }
  }
}

// Debugging
// --------------------------------------------------
#debugging {
  position: fixed;
  bottom: 0;
  left: 0;
  display: none;
  width: 100%;
  padding: 16px;
  
  h1 {
    font-size: 14px;
    color: rgb(255,255,255);
    text-shadow: none;
    background-color: rgb(0,0,0);
    display: inline;
    padding: 8px;
    margin: 0;
  }
  
  #debug-content {
    display: none;
    width: 90%;
    background: rgb( 0,0,0 );
    color: rgb(255,255,255);
    margin: 0;
    padding: 1em 1em 1em 2em;

    li {
      font-size: 10px;
    }
  }
}

// Search
// ==================================================
//
// - Search Form
// --------------------------------------------------
form#search {
  width: 90%;
  margin: 16px auto;
  text-align: center;

  input {
    line-height: 1.125;
    font-size: 16px;
    padding: 8px 16px;
    outline: none;
    border: 1px solid rgb(120,120,120);
    background-color: fade_out( $white, 0.50);
    border-color: transparent;
    @include borderRadius( 5px, 5px, 5px, 5px);
    @include box-shadow( 0px, -1px, 3px, #000, 0.6);
  }

  input.searchbox {
    width: 50%;
    margin: 0 auto;
  }

  input.submitbutton {
    background-size: contain;
    background-repeat: none;
    font-size: 1px;
    text-indent: 0;
    height: 35px;
    width: 35px;
    overflow: hidden;
    line-height: 30px;
  }
}

// - Search results
// --------------------------------------------------
#searchresults {
  ol {
    li {
      p {
        margin: 0;
      }
      .title {
        font-size: 20px;
      }
      .url {
        color: $color2;
      }
      .excerpt {
      }
      .score {
        font-size: 12px;
        font-weight: 100;
      }
      ins {
      }
    }
  }
}

// Callouts
// ==================================================
.callout
{
    padding: 1.5em 1em 1em 1em;
    background-color: $cta-color;
    overflow: hidden;
    border-radius: 0.25em;

    &.callout--center
    {
        text-align: center;
    }

    .callout__title
    {
        display: block;
        font-size: 4rem;
        line-height: 1;
        font-weight: 900;
        text-transform: uppercase;
        text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }

    p
    {
        margin: 0;
    }
}

// Code & Pre blocks
// --------------------------------------------------
code, pre {
  font-size: $unit * 12/16;
  background-color: $white;
  border: 1px solid rgb(180,180,180);
  padding: $unit;
}

pre {
  margin: $unit;
  overflow: hidden;
}

.byline {
  font-size: 11px;
  display: block;
  color: $gray;
}

// Profile snippet
// --------------------------------------------------
.profile-item {
  .profile-data {
    margin-left: 136px;
  }
}

// Fancybox custom styles
.fancybox-media.video {
    position: relative;
    display: inline-block;

    > img {
        display: block;
    }

    &::after {
        content: url(/images/play.svg);
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -30px; // half of the icon size
        margin-top: -30px; // half of the icon size
        opacity: 0.75;
        transition: opacity 0.2s;
    }

    &:hover::after {
        opacity: 1;
    }
}
